<template>
	<view class="bookingtype-box">
		<view class="label-view">
			<text class="label"> 请选择预约类别 </text>
		</view>
		<view class="button-box">
			<button class="uni-button" size="default" type="warn" @click="navTo('0')">危化品车辆</button>
			<button class="uni-button" size="default" type="primary" @click="navTo('4')">危废车辆</button>
			<!-- style="background-color:#42b983;color: #fff;" style="background-color:#ffcc00;color: #fff;"-->
			<button class="uni-button" size="default" type="primary" @click="navTo('3')">私家车</button>
			<button class="uni-button" size="default" type="primary" @click="navTo('1')">普通货车</button>
			<button class="uni-button" size="default" type="primary" @click="navTo('1')" >工程车</button>
			<button class="uni-button" size="default" style="background-color: #409eff;color: #fff;"
				@click="navTo('2')">人员入场</button>
			<button class="uni-button" size="mini" plain type="default" @click="close">关闭</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['item'], //数据数组
		data() {
			return {

			}
		},
		methods: {
			// 统一跳转接口,拦截未登录路由，navigator标签现在默认没有转场动画，所以用view
			// data:跳转数据； istab：调整类型是否为tab； pams：传递的参数(非必要)
			navTo(params) {
				this.$emit('close')
				if (params !== '2') {
					uni.navigateTo({
						url: '/pages/booking/booking-car-add?params=' + params
					})
				} else {
					uni.navigateTo({
						url: '/pages/booking/booking-person-add?params=' + params
					})
				}

			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang='scss' scoped>
	.bookingtype-box {
		width: 300px;
		height: 500px;
		background-color: #FFFFFF;
		border-radius: 15px;
		padding: 10px;

		.label-view {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 17%;
			font-size: 18px;
			font-weight: 400;
		}

		.content-view {
			width: 100%;
			height: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.content1 {
				width: 100%;
			}

			.content2 {
				font-size: 13px;
				width: 100%;
				// text-align: center;
				margin-top: 10px;
			}
		}

		.button-box {
			display: flex;
			flex-direction: column;
			margin: 6px;

			.uni-button {
				display: flex;
				flex: 0.5;
				margin: 6px 10px;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>
